<template>
  <div class="container">
    <div class="banner-container">
      <img
        src="http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg"
        class="img-banner"
        @click="onPreview"
      />
      <div class="banner-info">
        <div class="banner-title">大连圣海洋世界（AAAA景区）</div>
        <div class="pic-num-container">
          <i class="iconfont">&#xe602;</i>
          <div class="banner-num">39</div>
        </div>
      </div>
    </div>
    <common-gallary
      @close="handleGallaryClose"
      v-if="showGallary"
      imgs="imgs"
    ></common-gallary>
  </div>
</template>
<script>
import CommonGallary from "common/gallary/Gallary";
export default {
  name: "DetailBanner",
  components: {
    CommonGallary,
  },
  data() {
    return {
      showGallary: false,
      imgs: [
        "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
      ],
    };
  },
  methods: {
    onPreview() {
      this.showGallary = true;
    },

    handleGallaryClose() {
      this.showGallary = false;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
}

.banner-container {
  width: 100%;
  height: 214px;
  position: relative;
}

.img-banner {
  width: 100%;
  height: 214px;
}

.banner-info {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.3);
}

.banner-title {
  font-size: 16px;
}

.pic-num-container {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.banner-num {
  margin-left: 4px;
}
</style>